position: sticky
実現するために2つの要素が要る
sticky item
実際に固定したい要素
position: stickyを指定する
sticky containerの中でのみ固定される
sticky container
sticky itemの親要素
明示的に指定することはなく、sticky itemの親要素が自動でsticky containerになる
例
code:html
.container
.header
.block1_sticky
.block2
.content
.footer
こういう構造の時に、
.block1_stickyをsticky itemにすると、sticky containerは.headerになる
スクロールすると、.headerもスクロールされるので、思ったような挙動にならない
こう書き換える必要がある
code:html
.container
.block1_sticky
.block2
.content
.footer
.containerをsticky containerにしたいので、.block1_stickyその直接の子にしないといけない
つまり、かなりhtmlの構造に依存する
この例みたいに、CSSの要求のためにHTMLの構造を変更しないといけない事がある
ユースケース
https://gyazo.com/1701bd2e0b9935ecdecef68734ba3a63 https://tailwindcss.com/docs/position#sticky-positioning-elements
微妙にバグってるがmrsekut.icon